<ion-content  style="--background:#F8F8F8; ">
  <div class="video-top">
    <div class="video-box">
      <!-- <video src=""></video>
      <video src=""></video>
      <video src=""></video> -->
    </div>
    
    <div class="tab-box"  [ngClass]="{ next1:tabIndex =='0', next2:tabIndex == '1',next3:  tabIndex == '2', next4: tabIndex == '3',next5: tabIndex == '4'}">
      <div class="item" (click)="tabClick('0')">
         <div class="itemRight">申请</div>  <div class="itemLeft"></div>
      </div>
      <div  class="item"  (click)="tabClick('1')">
        <div class="itemRight">提交证据材料</div>  <div class="itemLeft"></div>
      </div>
      <div  class="item"      (click)="tabClick('2')" >
        <div class="itemRight">代草拟合同文书</div>  <div class="itemLeft"></div>
      </div>
       <div  class="item"   (click)="tabClick('3')">
        <div class="itemRight">合同图片</div>  <div class="itemLeft"></div>
      </div>
      <div  class="item"     (click)="tabClick('4')">
        <div class="itemRight">缴费</div> 
      </div>
    </div>
  </div>
  <div class="placehodler"></div>
  <div class="child-box">
    <div *ngIf="tabIndex == '0'">
      <div class="applyinfo">
        <div class="title" >
          <div class="topTitle"><span class="setBlue"></span>合同方</div>
          <ion-list class="apply-list">
            <ion-item lines="none">
              <ion-label>姓 名</ion-label>
              <span>{{htInfo.jia.name}}</span>
            </ion-item>
            <ion-item lines="none">
              <ion-label>性 别</ion-label>
              <span>{{htInfo.jia.gender==1?'男':'' || htInfo.jia.gender==0?'女':''}}</span>
            </ion-item>
            <ion-item lines="none">
              <ion-label>居民身份证号</ion-label>
              <span>{{htInfo.jia.idCard}}</span>
            </ion-item>
            <ion-item lines="none">
              <ion-label>地 址</ion-label>
              <span>{{htInfo.jia.address}}</span>
            </ion-item>
            <ion-item lines="none">
              <ion-label>电话号码</ion-label>
              <span>{{htInfo.jia.mobile}}</span>
            </ion-item>
          </ion-list>
        </div>

        <div class="title" >
          <div class="topTitle"><span class="setBlue"></span>合同方公司</div>
          <ion-list class="apply-list">
            <ion-item lines="none">
              <ion-label>名 称</ion-label>
              <span>{{htInfo.jiaCompany.companyName}}</span>
            </ion-item>
            <ion-item lines="none">
              <ion-label>法定代表人</ion-label>
              <span>{{htInfo.jiaCompany.statutoryPerson}}</span>
            </ion-item>
            <ion-item lines="none">
              <ion-label>联系电话</ion-label>
              <span>{{htInfo.jiaCompany.statutoryMobile}}</span>
            </ion-item>
            <ion-item lines="none">
              <ion-label>地 址</ion-label>
              <span>{{htInfo.jiaCompany.companyAdd}}</span>
            </ion-item>
          </ion-list>
        </div>

        <div class="title" >
          <div class="topTitle"><span class="setBlue"></span>合同相对方</div>
          <ion-list class="apply-list">
            <ion-item lines="none">
              <ion-label>姓 名</ion-label>
              <span>{{htInfo.yi.name}}</span>
            </ion-item>
            <ion-item lines="none">
              <ion-label>性 别</ion-label>
              <span>{{htInfo.yi.gender==1?'男':'女'}}</span>
            </ion-item>
            <ion-item lines="none">
              <ion-label>居民身份证号</ion-label>
              <span>{{htInfo.yi.idCard}}</span>
            </ion-item>
            <ion-item lines="none">
              <ion-label>地 址</ion-label>
              <span>{{htInfo.yi.address}}</span>
            </ion-item>
            <ion-item lines="none">
              <ion-label>电话号码</ion-label>
              <span>{{htInfo.yi.mobile}}</span>
            </ion-item>
          </ion-list>
        </div>

        <div class="title" >
          <div class="topTitle"><span class="setBlue"></span>合同相对方公司</div>
          <ion-list class="apply-list">
            <ion-item lines="none">
              <ion-label>名 称</ion-label>
              <span>{{htInfo.yiCompany.companyName}}</span>
            </ion-item>
            <ion-item lines="none">
              <ion-label>法定代表人</ion-label>
              <span>{{htInfo.yiCompany.statutoryPerson}}</span>
            </ion-item>
            <ion-item lines="none">
              <ion-label>联系电话</ion-label>
              <span>{{htInfo.yiCompany.statutoryMobile}}</span>
            </ion-item>
            <ion-item lines="none">
              <ion-label>地 址</ion-label>
              <span>{{htInfo.yiCompany.companyAdd}}</span>
            </ion-item>
          </ion-list>
        </div>

        <div class="title" >
          <div class="topTitle"><span class="setBlue"></span>公证内容</div>
          <ion-list class="apply-list">
            <ion-item lines="none">
              <ion-label>证书用途</ion-label>
              <span>{{gzInfo.yongtu}}</span>
            </ion-item>
            <ion-item lines="none">
              <ion-label>使用地</ion-label>
              <span>{{gzInfo.area}}</span>
            </ion-item>
            <ion-item lines="none">
              <ion-label>翻译语种</ion-label>
              <span>{{gzInfo.lang}}</span>
            </ion-item>
            <ion-item lines="none">
              <ion-label>申请事项</ion-label>
              <span>{{gzInfo.gongzhengValue}}</span>
            </ion-item>
            <ion-item lines="none">
              <ion-label>公证材料</ion-label>
              <span>{{gzInfo.cailiaoValue}}</span>
            </ion-item>
          </ion-list>
        </div>

      </div>
    </div>
    <div *ngIf="tabIndex == '1'">
      <div class="img-box">
        <div *ngFor='let item of materialContent;  let i = index' >
          <img class="img" [src]="item.filePath"  alt="item">
          <!-- <span  (click)="reloadImg(i)">删除</span> -->
        </div>
        <div class="img addimg" (click)="presentActionSheet()">
            +
        </div>
      </div>
    </div>
    <div *ngIf="tabIndex == '2'">
      <div [innerHTML]="commissionContent" ></div>
    </div>
    <div *ngIf="tabIndex == '3'">
      <div [innerHTML]="xwblContent" ></div>
    </div>
    <div *ngIf="tabIndex == '4'">
      <table border="1" cellspacing="" cellpadding="">
        <tr>
          <td colspan="2">受理单号</td>
          <td  colspan="6">{{orderInfo.orderNo}}</td>
        </tr>
        <tr>
          <td colspan="2">受理日期</td>
          <td  colspan="6">{{orderInfo.lastDate | date:'yyyy-MM-dd'}}</td>
        </tr>
        <tr>
          <td colspan="2">申请人</td>
          <td class="left" colspan="2">{{orderInfo.name}}</td>
          <td colspan="2">承办人员</td>
          <td colspan="2">{{orderInfo.greffierName}}</td>
        </tr>
        
        <tr>
          <td  colspan="2">公证用途</td>
          <td  colspan="6">{{gzInfo.yongtu}}</td>
        </tr>
        <tr>
          <td  colspan="2">发证地点</td>
          <td  colspan="6">{{jftzContent.address }}</td>
        </tr> 
        <tr>
          <td  colspan="2">公证事项</td>
          <td  colspan="6">{{gzInfo.gongzhengValue }}</td>
        </tr>
        <tr>
          <td colspan="2">公证费</td>
          <td colspan="2">法律服务费</td>
          <td colspan="2">摄像、拍照费</td>
          <td colspan="2">上门服务费</td>
        </tr>
        <tr>
          <td  colspan="2">{{jftzContent.gzf ||"--"}}元</td>
          <td colspan="2">{{jftzContent.flf || "--"}}元</td>
          <td colspan="2">{{jftzContent.sxf || "--"}}元</td>
          <td colspan="2">{{jftzContent.smf || "--"}}元</td>
        </tr>
      
        <tr>
          <td class="other" colspan="8">其他收费:{{jftzContent.qtf}}</td>
        </tr>
        <tr>
          <td class="other"  colspan="8">合计:{{jftzContent.gzf *1+jftzContent.flf *1+jftzContent.sxf *1 +jftzContent.smf *1+jftzContent.qtf *1}}</td>
        </tr>
      </table>
    </div>
  </div>
  <div id="imgslides" *ngIf="isShowimg">
      <div class="imgslides-icon" (click)="iconclick()"><ion-icon name="close-outline"></ion-icon></div>
      <ion-slides class="imgslides1" pager="true" [options]="slideOpts">
        <ion-slide *ngFor="let item of htImg">
          <img [src]="item">
        </ion-slide>
      </ion-slides>
  </div>
</ion-content>
